<template>
    <div ref="lotHeader">
        <lot-menu v-show="this.$store.state.lotPlayMenu"></lot-menu>
        <div class="m-header flex-box flex-ac flex-pj">
            <div class="flex-box flex-ac he-fv" @click="winclose">
                <div class="arrow_left_s arrow_left_i"></div>
            </div>
            <div class="flex-box flex-ac" @click="togTab">
                <h1 class="text">{{ this.$store.state.lotPlayTitle }}</h1>
                <div class="arrow_s" 
                :class="{
                    'arrow_up' : this.$store.state.lotPlayTab,
                    'arrow_down' : !this.$store.state.lotPlayTab,
                }"></div>
            </div>
            <div class="flex-box flex-ac he-fv" @click="openMenu">
                <div class="icon_menu"></div>
            </div>
        </div>
        <lot-play-tab v-show="this.$store.state.lotPlayTab"></lot-play-tab>
    </div>
</template>

<script type="text/ecmascript-6">
import 'common/css/lottery.css'
import LotPlayTab from './lotPlayTab'
import LotMenu from './lotMenu'
export default {
    data () {
        return {
        }
    },
    methods: {
        winclose () {
            this.$router.go(-1)
        },
        togTab () {
            this.$store.state.lotPlayTab = !this.$store.state.lotPlayTab
        },
        openMenu () {
            this.$store.state.lotPlayTab = false
            this.$store.state.lotPlayMenu = !this.$store.state.lotPlayMenu
        }
    },
    components : {
        LotPlayTab,
        LotMenu
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable" 
    .m-header
        background: $color-r
        position: relative
        height: 2.75rem
        text-align: center
        color: white
    .arrow_left_s
        width: .75rem
        height: 1.25rem
        margin: 0 1rem 
        background-size: 100% 100%
    .arrow_s
        width: 1.25rem
        height: .75rem 
        background-size: 100% 100%
    .arrow_left_i
        background-image: url('../../common/image/arrow_left.png') 
    .arrow_up
        background-image: url('../../common/image/arrow_whiteup.png')
    .arrow_down 
        background-image: url('../../common/image/arrow_whitedown.png')
    .text
        display: inline-block
        vertical-align: top
        line-height: 2.75rem
        font-size: $fonts-18 
    .icon_menu
        width: 1.25rem; 
        height: 1.25rem; 
        margin: 0 .75rem;
        background-repeat: no-repeat
        background-size: 100% 100%
        background-image: url('../../common/image/menu.png')
</style>